<template>
<!--pages/tools/yaohaojieguo/yaohaojieguo.wxml-->
<view class="body" :style="'padding-top:' + (navtop+inputHeight) + 'px;'">
  <navigator open-type="navigateBack" v-if="fromSubscribe!=1&&fromShare!=1">
    <image class="toback" :style="'top:' + navtop + 'px'" src="/static/images/topical/fleft.png"></image>
  </navigator>
  <navigator open-type="switchTab" url="/pages/index/index" v-else>
    <image class="toback" :style="'top:' + (navtop+1) + 'px'" src="http://imgbdb3.bendibao.com/xcxbdb/file/20214/25/20210425193604_88558.jpeg"></image>
  </navigator>
  <view class="top-back">
  </view>
  <view class="bottom-back">
  </view>
  <view class="top" v-if="model!=3">
    <!-- <view class="tip-banner flex">
      <view class="left">
        您在摇号订阅中设置的是北京市
      </view>
      <view class="right flex">
        <image src="http://imgbdb3.bendibao.com/xcxbdb/file/20214/20/20210420160929_34469.jpeg"></image>
        <view class="change">
          切换到北京市
        </view>
      </view>
    </view> -->
    <view class="title">
      摇号结果查询
    </view>
    <view class="line flex">
      <view class="left">
        购车指标不错过
      </view>
      <picker mode="selector" :value="cityIndex" :range="arr" range-key="cityname" @change="changeCity">
        <view class="right flex">
          <view class="city">
            {{arr[cityIndex].cityname}}市
          </view>
          <image src="/static/images/index/dwicon.png"></image>
        </view>
      </picker>
    </view>
  </view>
  <view class="top" v-else>
    <!-- <view class="tip-banner flex">
      <view class="left">
        您在摇号订阅中设置的是北京市
      </view>
      <view class="right flex">
        <image src="http://imgbdb3.bendibao.com/xcxbdb/file/20214/20/20210420160929_34469.jpeg"></image>
        <view class="change">
          切换到北京市
        </view>
      </view>
    </view> -->
    <view class="title">
      摇号结果推送设置
    </view>
    <view class="line flex">
      <view class="left">
        摇号结果推送设置
      </view>
    </view>
  </view>
  <!-- 未查询 -->
  <block v-if="model==2">
    <view class="middle content">
      <view class="tit">
        摇号结果查询
      </view>
      <view class="search-line flex">
        <input type="text" class="input" placeholder="输入13位申请编码" @input="input" maxlength="13">
        <view class="search" @tap="search">
          查询
        </view>
      </view>
      <view class="query">
        <view class="name">
          查询申请编码网址
        </view>
        <view class="copy-line flex" @tap="copyUrl" :data-url="arr[cityIndex].url">
          <view class="left">
            <text>{{arr[cityIndex].cityname}}市</text><text>{{arr[cityIndex].url}}</text>
          </view>
          <view class="right">
            复制
          </view>
        </view>
        <view class="tip">
          (小客车指标调控管理信息系统)
        </view>
      </view>
    </view>
    <view class="bottom content">
      <view class="banner flex">
        <view class="tit">
          摇号时间提醒
        </view>
        <view class="time">
          下次摇号：{{arr[cityIndex].time}}
        </view>
      </view>
      <view class="remain-time">
        距离下期摇号公布还剩<text> {{arr[cityIndex].days}} </text>天
      </view>
    </view>
  </block>
  <!-- 未中签 -->
  <block v-if="model==0">
    <view class="middle content">
      <view class="tit">
        本期摇号结果
      </view>
      <view class="noScore flex">
        <view class="left">
          未中签
        </view>
        <view class="right">
          很遗憾! 请期待下次摇号
        </view>
      </view>
      <view class="code flex">
        <text>有效编码：{{inputCode}}</text>
        <view class="modify" @tap="goSub">
          修改
        </view>
      </view>
      <!-- 如果从订阅通知进来 -->
      <block v-if="fromSubscribe==1">
        <button class="continueSub blue-btn" @tap="goSub">
          继续订阅
        </button>
        <view class="tip">
          点击【继续订阅】之后，继续为您跟踪次月的摇号结果
        </view>
      </block>
    </view>
    <view class="bottom content">
      <view class="banner flex">
        <view class="tit">
          摇号时间提醒
        </view>
        <view class="time">
          下次摇号：{{arr[cityIndex].time}}
        </view>
      </view>
      <view class="remain-time">
        距离下期摇号公布还剩<text> {{arr[cityIndex].days}} </text>天
      </view>
    </view>
  </block>
  <!-- 中签 -->
  <block v-if="model==1">
    <view class="middle content">
      <view class="tit">
        本期摇号结果
      </view>
      <view class="score flex">
        <view class="left">
          中签
        </view>
        <view class="mid">
          恭喜你! 中签啦!
        </view>
        <view class="right">
          <image src="http://imgbdb3.bendibao.com/xcxbdb/file/20214/20/20210420115749_50803.jpeg"></image>
        </view>
      </view>
      <view class="code flex">
        <text>有效编码：{{inputCode}}</text>
        <view class="modify" @tap="reset">
          重置
        </view>
      </view>
    </view>
    <view class="bottom content">
      <view class="banner flex">
        <view class="tit">
          摇号时间提醒
        </view>
        <view class="time">
          下次摇号：{{arr[cityIndex].time}}
        </view>
      </view>
      <view class="remain-time">
        距离下期摇号公布还剩<text> {{arr[cityIndex].days}} </text>天
      </view>
    </view>
  </block>
  <!-- 摇号结果推送设置 -->
  <block v-if="model==3">
    <view class="bottom content">
      <view class="banner flex">
        <view class="tit">
          摇号次月订阅设置
        </view>
        <view class="time">
          下次摇号：{{arr[cityIndex].time}}
        </view>
      </view>
      <picker mode="selector" :value="cityIndex" :range="arr" range-key="cityname" @change="changeCity">
        <view class="subCityBox flex">
          <view class="left">
            <view class="name">
              订阅地区
            </view>
            <view class="city">
              {{arr[cityIndex].cityname}}
            </view>
          </view>
          <view class="right">
            <image src="/static/images/back.png"></image>
          </view>
        </view>
      </picker>
      <view class="main-box">
        <view class="white-box">
          <view class="name">
            有效申请编码
          </view>
          <view class="code-box flex" @tap="reset">
            <view class="code">
              {{inputCode||listData[0].code}}
            </view>
            <view class="change-btn">
              修改
            </view>
          </view>
        </view>
        <view class="grey-box">
          <view class="name">
            查询申请编码网址
          </view>
          <view class="url-box flex" @tap="copyUrl" :data-url="arr[cityIndex].url">
            <view class="url">
              <text>{{arr[cityIndex].cityname}}市</text><text>{{arr[cityIndex].url}}</text>
            </view>
            <view class="url-btn">
              复制
            </view>
          </view>
          <view class="tip">
            (小客车指标调控管理信息系统)
          </view>
        </view>
        <subscribeMessaged :city="arr[cityIndex].cityname" name="名单查询结果" :text="inputCode?(hasSubscribed?'已订阅':'确定订阅'):(listData[0].code?'已订阅':'确定订阅')" @subsuccess="subsuccess" tepId="Us5cSgjk6oFqj6UxBMaob-yvgX5kYepETp2B-VwUBUY" :code="inputCode||listData[0].code">
          <button class="confirmSub">
            {{inputCode?(hasSubscribed?'已订阅':'确定订阅'):(listData[0].code?'已订阅':'确定订阅')}}
          </button>
        </subscribeMessaged>
        <view class="tip">
          次月的订阅摇号提醒，摇号结果在次月推送到您的手机上
        </view>
      </view>
    </view>
    <view class="bottom content" style="margin-top:60rpx;" v-if="listData.length!=0">
      <view class="banner flex">
        <view class="tit">
          次月已订阅记录
        </view>
        <view class="time">
          下次摇号：{{arr[cityIndex].time}}
        </view>
      </view>
      <view class="box-list">
        <view class="table">
          <view class="tr">
            <view class="th">订阅地区</view>
            <view class="th">申请编码</view>
            <view class="th"></view>
          </view>
          <block v-for="(item, index) in listData" :key="index">
            <view class="tr">
              <view class="td">{{item.city}}</view>
              <view class="td">{{item.code}}</view>
              <view class="td">
                <view class="button" @tap="cancelSubscribe" :data-code="item.code" :data-city="item.city">
                  {{item.cancel}}</view>
              </view>
            </view>
          </block>
        </view>
      </view>
    </view>
    <view class="padding"></view>
  </block>
  <view class="foot" v-if="model!=3">
    <view class="button-line">
      <button class="white" open-type="share">分享</button>
      <block v-if="listData.length!=0"><button class="blue" @tap="goSub">查看订阅情况</button></block>
      <block v-else><button class="blue" @tap="goSub">次月订阅提醒</button></block>
    </view>
    <block v-if="fromSubscribe!=1">
      <view class="tip">
        次月的订阅摇号提醒，摇号结果在次月推送到您的手机上
      </view>
    </block>
  </view>
</view>
</template>

<script>
// pages/tools/yaohaojieguo/yaohaojieguo.js
const util = require("../../../utils/util.js");
const app = getApp();
import subscribeMessaged from "../../../component/subscribeMessaged/subscribeMessaged";

export default {
  data() {
    return {
      model: 2,
      //0为未中签,1为中签,2为未查询,3为订阅提醒
      inputCode: '',
      //输入框绑定input
      fromSubscribe: 0,
      //标记是否从订阅通知页来,1为是,0为不是
      arr: [],
      //用来储存城市和申请编码url
      cityIndex: 0,
      //城市下标
      remainDay: 0,
      //剩余天数
      listData: [],
      //订阅记录列表
      hasSubscribed: false,
      //订阅记录中是否含有当前输入的城市和code
      navtop: 44,
      inputHeight: 30,
      fromShare: 0
    };
  },

  components: {
    subscribeMessaged
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (opt) {
    //获取胶囊位置信息
    if (uni.getMenuButtonBoundingClientRect) {
      let menuButtonObject = uni.getMenuButtonBoundingClientRect();
      if (menuButtonObject) this.setData({
        navtop: menuButtonObject.top,
        inputHeight: menuButtonObject.height
      });
    }

    this.setData({
      fromShare: opt.fromShare || 0
    });
    util.getUrl(app.globalData.url).then(e => {
      util.request("sub_message.php", {
        action: 'urls'
      }, "POST").then(e => {
        this.setData({
          arr: e.data
        }, () => {
          if (opt.city) {
            const cityIndex = this.arr.findIndex(item => {
              return item.cityname.includes(opt.city);
            });
            this.setData({
              cityIndex
            });
          }

          this.getRecord();

          if (opt.fromSubscribe == 1) {
            this.setData({
              fromSubscribe: 1,
              inputCode: opt.code
            }, () => {
              this.search();
            });
          }
        });
      });
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: '车牌摇号结果查询',
      path: `pages/tools/yaohaojieguo/yaohaojieguo?city=${this.arr[this.cityIndex].cityname}&fromShare=1`
    };
  },
  methods: {
    // 获取次月订阅记录
    getRecord() {
      util.request("sub_message.php", {
        action: 'list',
        openid: uni.getStorageSync("openid"),
        name: "名单查询结果"
      }, "POST").then(e => {
        let listData = e.data ? e.data.map(item => {
          item.cancel = "取消订阅";
          return item;
        }) : [];
        this.setData({
          listData
        }); // 如果列表没有元素,说明未订阅,如果有一个符合城市和code相等,那么说明订阅了

        this.listData.length == 0 ? this.setData({
          hasSubscribed: false
        }) : this.setData({
          hasSubscribed: this.listData.some(item => {
            return item.city == this.arr[this.cityIndex].cityname && item.code == this.inputCode;
          })
        });
      });
    },

    // 取消订阅
    cancelSubscribe(e) {
      let code = util.getValue("code", e);
      let city = util.getValue("city", e);
      let data = {
        action: "del",
        openid: uni.getStorageSync('openid'),
        name: "名单查询结果",
        city,
        code
      };
      util.request("sub_message.php", data, "POST").then(e => {
        if (e.data.state == 1) {
          this.getRecord();
          uni.showToast({
            title: '取消订阅成功',
            icon: 'none',
            mask: true
          });
        }
      });
    },

    // 摇号日期提醒
    // getTime() {
    //   const nowDate = new Date().getDate()
    //   const nowYear = new Date().getFullYear()
    //   const nowMonth = new Date().getMonth() + 1
    //   // 如果小于26号,
    //   if (nowDate < 26) {
    //     this.setData({
    //       remainDay: 26 - nowDate,
    //       year: nowYear,
    //       month: nowMonth
    //     })
    //   } else {
    //     // 如果是12月,那么加一年,并且12月变成一月
    //     const nextMonth = nowMonth == 11 ? 1 : nowMonth + 1
    //     const nextYear = nowMonth == 11 ? nowYear + 1 : nowYear
    //     this.setData({
    //       remainDay: this.datedifference(`${nextYear}-${nextMonth}-26`, `${nowYear}-${nowMonth}-${nowDate}`),
    //       year: nextYear,
    //       month: nextMonth
    //     })
    //   }
    // },
    // //sDate1和sDate2是2006-12-18格式  
    // //计算两个时间差了多少天
    // datedifference(sDate1, sDate2) {
    //   var dateSpan,
    //     tempDate,
    //     iDays;
    //   sDate1 = Date.parse(sDate1);
    //   sDate2 = Date.parse(sDate2);
    //   dateSpan = sDate2 - sDate1;
    //   dateSpan = Math.abs(dateSpan);
    //   iDays = Math.floor(dateSpan / (24 * 3600 * 1000));
    //   return iDays
    // },
    // 修改城市
    changeCity(e) {
      this.setData({
        cityIndex: e.detail.value
      });
      this.getRecord();
    },

    // 复制url
    copyUrl(e) {
      const url = util.getValue("url", e); // const tit = '因为小程序规定不能打开链接，所以请将链接复制并粘贴到浏览器打开。'

      const tit = '提示';
      const content = url;
      uni.showModal({
        title: tit,
        content: '因为小程序规定不能打开链接，所以请将链接复制并粘贴到浏览器打开。\n\n' + content,
        cancelText: '关闭弹窗',
        confirmText: '复制网址',
        success: res => {
          if (res.confirm) {
            uni.setClipboardData({
              data: url,
              success: res => {
                uni.showToast({
                  title: '复制成功'
                });
              }
            });
          }
        }
      });
    },

    // 前往次月订阅提醒
    goSub() {
      var regEx = new RegExp("[^a-zA-Z0-9\_一-龥]", "i");

      if (!regEx.test(this.inputCode.trim()) && this.inputCode.trim().length == 13 || this.listData.length != 0) {
        this.setData({
          model: 3
        });
        this.getRecord();
      } else {
        uni.showToast({
          title: '请输入正确的13位申请编码后再订阅',
          icon: 'none',
          mask: true
        });
      }
    },

    // 订阅成功
    subsuccess() {
      this.getRecord();
      uni.showToast({
        title: '订阅成功，待结果公布后会有提醒',
        icon: 'none',
        mask: 'true'
      });
    },

    // 输入框绑定input
    input(e) {
      this.setData({
        inputCode: e.detail.value
      });
    },

    //查询
    search() {
      var regEx = new RegExp("[^a-zA-Z0-9\_一-龥]", "i");

      if (!regEx.test(this.inputCode.trim()) && this.inputCode.trim().length == 13) {
        util.request("sub_message.php", {
          action: "search",
          code: this.inputCode,
          city: this.arr[this.cityIndex].cityname
        }, "POST").then(e => {
          const state = e.data ? e.data.state : ''; //0为未中签,1为中签

          if (state == 0 || state == 1) {
            this.setData({
              model: state
            });
          }
        });
      } else {
        uni.showToast({
          title: '请输入正确的13位申请编码后再查询',
          icon: 'none'
        });
      }
    },

    // 重置编码
    reset() {
      this.setData({
        model: 2
      });
    }

  }
};
</script>
<style>
/* pages/tools/yaohaojieguo/yaohaojieguo.wxss */

.body {
    height: 100vh;
    padding: 121rpx 30rpx 0rpx 30rpx;
    box-sizing: border-box;
    position: relative;
}

.toback {
    position: absolute;
    width: 48rpx;
    height: 48rpx;
    top: 56rpx;
    left: 25rpx;
}

.top-back {
    position: fixed;
    top: 0;/*  #ifdef  H5  */
    top: calc(88rpx + constant(safe-area-inset-top));
    top: calc(88rpx + env(safe-area-inset-top));/*  #endif  */
    left: 0;
    width: 100%;
    height: 30vh;
    background-color: rgba(21, 119, 255, 1);
    z-index: -1;
}

.bottom-back {
    position: fixed;
    top: 30%;
    left: 0;
    width: 100%;
    height: 70vh;
    background-color: #F4F6F8;
    z-index: -1;
    background-image: url("http://imgbdb3.bendibao.com/xcxbdb/file/20214/19/20210419092120_50562.jpeg");
    background-position: top center;
    background-size: contain;
    background-repeat: no-repeat;
}

.content {
    width: 100%;
    opacity: 1;
    background: #ffffff;
    border-radius: 20rpx;
    box-shadow: 0px 0px 30rpx 0px rgba(0, 0, 0, 0.05);
}

.tit {
    font-size: 30rpx;
    font-weight: 400;
    color: #333333;
    line-height: 70rpx;
    padding-left: 37rpx;
}

.body .top {
    z-index: 100;
    color: #ffffff;
    margin-bottom: 32rpx;
}

.body .top .tip-banner {
    padding: 0 30rpx;
    background: rgba(0, 0, 0, 0.30);
    width: 100%;
    height: 63rpx;
    justify-content: space-between;
    margin-left: -30rpx;
    margin-bottom: 29rpx;
}

.body .top .tip-banner .left {
    font-size: 26rpx;
    font-weight: 400;
    color: #ffffff;
}

.body .top .tip-banner .right {
    font-size: 26rpx;
    font-weight: 400;
    color: #ffff00;
}

.body .top .tip-banner .right image {
    width: 26rpx;
    height: 22rpx;
    margin-right: 12rpx;
}

.body .top .title {
    z-index: 100;
    font-size: 46rpx;
    font-weight: 600;
    margin-bottom: 4rpx;
    line-height: 64rpx;
}

.body .top .line {
    font-size: 30rpx;
    font-weight: 400;
    justify-content: space-between;
}

.body .top .line .right image {
    width: 21rpx;
    height: 14rpx;
    margin-left: 15rpx;
}

.body .middle {
    margin-bottom: 30rpx;
}

.body .middle .tit {
    border-radius: 20rpx 20rpx 0 0;
    background: #F7FBFE;
}


/* 未查询 */

.body .middle .search-line {
    margin-top: 37rpx;
    padding-left: 37rpx;
    margin-bottom: 38rpx;
}

.body .middle .search-line .input {
    background: #F4F6F8;
    width: 504rpx;
    height: 87rpx;
    border-radius: 30rpx;
    box-sizing: border-box;
    padding-left: 30rpx;
    font-size: 30rpx;
    line-height: 87rpx;
    font-weight: 600;
    color: #404040;
}

.body .middle .search-line .search {
    margin-left: 30rpx;
    font-size: 30rpx;
    font-weight: 600;
    text-align: LEFT;
    color: #1577ff;
}

.body .middle .query {
    padding-left: 37rpx;
    padding-bottom: 45rpx;
}

.body .middle .query .name {
    font-size: 30rpx;
    font-weight: 400;
    color: #000000;
    margin-bottom: 16rpx;
}

.body .middle .query .copy-line {
    margin-bottom: 14rpx;
}

.body .middle .query .copy-line .left {
    font-size: 26rpx;
    font-weight: 400;
    width: 231rpx;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.body .middle .query .copy-line .right {
    height: 28rpx;
    border-radius: 30rpx;
    line-height: 26rpx;
    font-size: 22rpx;
    border: 1rpx #999999 solid;
    box-sizing: border-box;
    text-align: center;
    padding: 0 6rpx;
    margin-left: 3rpx;
}

.body .middle .query .tip {
    font-size: 20rpx;
    font-weight: 400;
    color: #999999;
    text-align: left;
}


/* 未中签 */

.body .middle .noScore {
    margin-top: 58rpx;
    margin-left: 37rpx;
    margin-bottom: 48rpx;
    align-items: center;
}

.body .middle .noScore .left {
    margin-right: 41rpx;
    line-height: 70rpx;
    font-size: 50rpx;
    font-weight: 600;
    color: rgba(21, 119, 255, 0.50);
}

.body .middle .noScore .right {
    font-size: 30rpx;
    font-weight: 400;
    color: rgba(21, 119, 254, 0.50);
}

.body .middle .code {
    margin-left: 43rpx;
    padding-bottom: 55rpx;
}

.body .middle .code text {
    font-size: 30rpx;
    font-weight: 400;
    color: #333333;
    margin-right: 16rpx;
}

.body .middle .code .modify {
    height: 28rpx;
    border: 1px solid rgba(153, 153, 153, 0.50);
    border-radius: 10rpx;
    line-height: 28rpx;
    font-size: 24rpx;
    padding: 0 6rpx;
}

.body .middle .blue-btn {
    width: 330rpx;
    height: 80rpx;
    line-height: 80rpx;
    opacity: 1;
    background: #1577ff;
    border-radius: 40rpx;
    font-size: 30rpx;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 43rpx;
}

.body .middle .tip {
    font-size: 24rpx;
    font-weight: 400;
    text-align: center;
    color: #666666;
}

.body .middle>.tip::after {
    content: '';
    display: block;
    width: 100%;
    height: 56rpx;
}


/* 中签 */

.body .middle .score {
    margin-left: 55rpx;
    margin-bottom: 5rpx;
    align-items: center;
}

.body .middle .score .left {
    font-size: 55rpx;
    font-weight: 600;
    color: #1577ff;
    line-height: 77rpx;
    margin-right: 37rpx;
    position: relative;
}

.body .middle .score .left::before {
    content: '';
    position: absolute;
    left: -10rpx;
    top: -10rpx;
    background: url("http://imgbdb3.bendibao.com/xcxbdb/file/20214/20/20210420120033_96560.jpeg") no-repeat center/contain;
    width: 153rpx;
    height: 58rpx;
}

.body .middle .score .mid {
    font-size: 30rpx;
    font-weight: 400;
    color: #1577fe;
    margin-right: 37rpx;
    letter-spacing: 1.5rpx;
}

.body .middle .score .right {
    width: 164rpx;
    height: 164rpx;
}

.body .middle .score .right image {
    width: 100%;
    height: 100%;
}

.body .middle .resetCode {
    margin-bottom: 0;
}

.body .middle .block {
    height: 56rpx;
    width: 100%;
}

.body .bottom .banner {
    justify-content: space-between;
    background: #F7FBFE;
    padding-right: 38rpx;
    align-items: center;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
}

.body .bottom .banner .time {
    font-size: 24rpx;
    font-weight: 600;
    color: #1576fd;
}

.body .bottom .remain-time {
    padding-left: 37rpx;
    padding-bottom: 32rpx;
    margin-top: 32rpx;
    font-size: 34rpx;
    font-weight: 400;
    color: #333333;
}

.body .bottom .remain-time text {
    font-size: 36rpx;
    color: #FFA66A;
    font-weight: 600;
}


/*  摇号次月订阅设置*/

.body .bottom .subCityBox {
    padding: 40rpx 37rpx 37rpx 37rpx;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    border-bottom: 1px rgba(0, 0, 0, 0.10) solid;
}

.body .bottom .subCityBox .left .name {
    font-size: 30rpx;
    font-weight: 600;
    color: #333333;
}

.body .bottom .subCityBox .left .city {
    font-size: 26rpx;
    font-weight: 400;
    color: #666666;
}

.body .bottom .subCityBox .right {
    width: 19rpx;
    height: 29rpx;
}

.body .bottom .subCityBox .right image {
    width: 100%;
    height: 100%;
}

.body .bottom .main-box {
    padding: 46rpx 37rpx 73rpx 37rpx;
}

.body .bottom .main-box .white-box {
    margin-bottom: 29rpx;
}

.body .bottom .main-box .white-box .name {
    font-size: 30rpx;
    font-weight: 400;
    color: #000000;
    margin-bottom: 17rpx;
}

.body .bottom .main-box .white-box .code-box .code {
    font-size: 26rpx;
    font-weight: 400;
    color: #999999;
    margin-right: 26rpx;
}

.body .bottom .main-box .white-box .code-box .change-btn {
    box-sizing: border-box;
    padding: 0 6rpx;
    height: 28rpx;
    border: 1rpx solid rgba(153, 153, 153, 0.50);
    border-radius: 10rpx;
    font-size: 22rpx;
    line-height: 28rpx;
}

.body .bottom .main-box .grey-box {
    background-color: #f4f6f8;
    border-radius: 10rpx;
    padding: 19rpx 0 18rpx 26rpx;
}

.body .bottom .main-box .grey-box .name {
    font-size: 30rpx;
    font-weight: 400;
    color: #000000;
    margin-bottom: 17rpx;
}

.body .bottom .main-box .grey-box .url-box {
    margin-bottom: 9rpx;
}

.body .bottom .main-box .grey-box .url-box .url {
    font-size: 26rpx;
    font-weight: 400;
    color: #000000;
    margin-right: 3rpx;
    width: 231rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.body .bottom .main-box .grey-box .url-box .url-btn {
    font-size: 22rpx;
    height: 28rpx;
    line-height: 28rpx;
    border: 1rpx solid rgba(153, 153, 153, 0.50);
    border-radius: 10rpx;
}

.body .bottom .main-box .grey-box .tip {
    font-size: 20rpx;
    font-weight: 400;
    color: #999999;
}

.body .bottom .main-box .confirmSub {
    margin-top: 81rpx;
    margin-bottom: 57rpx;
    width: 330rpx;
    height: 80rpx;
    line-height: 80rpx;
    opacity: 1;
    background: #1577ff;
    border-radius: 40rpx;
    font-size: 30rpx;
    font-weight: 400;
    color: #ffffff;
}

.body .bottom .main-box>.tip {
    font-size: 24rpx;
    font-weight: 400;
    text-align: center;
    color: #999999;
}

.body .foot {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 171rpx;
    box-sizing: border-box;
    padding: 0 50rpx;
}

.body .foot .button-line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 35rpx;
}

.body .foot .button-line button {
    height: 80rpx;
    opacity: 1;
    line-height: 80rpx;
    border-radius: 40rpx;
    margin: 0;
    font-size: 30rpx;
    font-weight: 400;
}

.body .foot .button-line .white {
    min-width: 244rpx;
    width: 100%;
    background: #ffffff;
    color: #1577ff;
}

.body .foot .button-line .blue {
    color: #ffffff;
    width: 330rpx;
    background: #1577ff;
    margin-left: 76rpx;
    flex: none;
}

.body .foot .tip {
    font-size: 24rpx;
    font-weight: 400;
    text-align: center;
    color: #999999;
}


/* 表格 */

.table {
    border: 0px solid darkgray;
}

.tr {
    display: flex;
    width: 100%;
    justify-content: center;
    height: 3rem;
    align-items: center;
}

.td {
    width: 40%;
    justify-content: center;
    text-align: center;
    color: #999999;
    font-size: 24rpx;
}

.td .button {
    border-radius: 10rpx;
    border: 2rpx solid #999999;
    width: 50%;
    margin: 0 auto;
}

.bg-w {
    background: snow;
}

.th {
    width: 40%;
    justify-content: center;
    color: #333333;
    display: flex;
    height: 3rem;
    align-items: center;
    font-weight: 600;
}

.padding {
    display: block;
    width: 100%;
    height: 60rpx;
}
</style>